<template>
  <div class="menu-container">
    <ol>
      <li>
        <router-link to="/">返回主页</router-link>
      </li>
      <li v-for="(title, index) in titles" :key="index" class="custom">
        <span @click="jumpTo($event.target)">{{title}}</span>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'FloatMenu',
  props: ['titles'],
  methods: {
    jumpTo(target){
      const destinaton = document.getElementById(target.innerText)
      window.scrollTo({top: destinaton.offsetTop, behavior: 'smooth'})
    }
  }
}
</script>

<style>
.menu-container{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  height: 100vh;
  box-shadow: inset 8px 0 48px rgba(50, 50, 50, 0.2);
}

.menu-container > ol{
  display: flex;
  width: 70%;
  flex-direction: column;
  list-style: none;
}

ol > li{
  display: flex;
  align-items: center;
  height: 3rem;
  margin: 1rem 0;
  padding-left: 1.25rem;
  position: relative;
}

ol > li:first-child > a{
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pink);
  text-decoration: none;
  transition: color 0.5s;
}

ol > li > span{
  font-size: 1.25rem;
  font-weight: 600;
  color: grey;
  transition: color 0.5s;
  cursor: pointer;
}

ol > li::after{
  content: "";
  position: absolute;
  top: 0;
  /*left设为0容易残留一条线*/
  left: 2px;
  width: 0;
  height: 100%;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to right, var(--pink), rgba(255, 255, 255, 0));
  z-index: -1;
  transition: width 0.3s ease-out;
}

ol > li:hover::after, ol > li.current::after{
  width: 90%;
  transition: width 0.3s ease-out;
}

ol > li:hover > span, ol > li.current > span, ol > li:hover > a{
  color: white;
  transition: color 0.1s;
}

</style>